<template>
  <div class="i-form-plugin">
    <el-form ref="form" label-width="auto" size="mini">
      <form-model v-for="item,index in config" :key="index" :data="config[index]"></form-model>
    </el-form>
  </div>
</template>
<script type="text/javascript">
import FormModel from './FormModel.vue'
import FormData from './form.js'
import FormConfig from './config.js'

//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('multifunction')

export default {
  props: {
    config: {
      type: [Array, Object],
      default: function() {
        return FormConfig
      }
    },
    mak: [Number, String],
    value: [Array, Object, String],
    type: String,
  },
  components: {
    "form-model": FormModel
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  created() {
    // 生成唯一key值码
    this.fieldKey = 'xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });

    this.initialize({key:this.fieldKey,config:this.config});

  },
  watch:{
    value:{
      handler(val,old){
        if(this.value){
          this.setForm({key:this.fieldKey,config:this.value})
        }
      },
      deep:true,
    }
  },
  data() {
    return {
      name: 'form表单组件',
      // 生成唯一码
      fieldKey:null,
    }
  },
  mounted(){
    if(this.value){
      this.setForm({key:this.fieldKey,config:this.value})
    }
  },
  methods: {
    ...mapActions(['initialize']),
    ...mapMutations(['setForm'])
  }
}

</script>
<style type="text/css" lang="scss">
.i-form-plugin {

  /*  .el-input {
    width: 420px;
  }

  .el-textarea {
    width: 420px;
  }

  .el-date-editor {
    width: 420px;
  }*/
}

</style>
